﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
    <title></title>
    <script src="../../js/jquery.js" type="text/javascript"></script>
    <script src="../../js/maptalks.js" type="text/javascript"></script>
    <script src="../../js/echart.js" type="text/javascript"></script>
    <script src="../../js/echart-gl.js" type="text/javascript"></script>
    <script src="../../js/turf.js" type="text/javascript"></script>
    <style>
        html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  #main{
    width: 100%;
    height: 100%;
  }
  </style>
</head>

<body>
    <div id="main"></div>
</body>
<script type="text/javascript">
    //origin echart mehudeyi
    //https://gallery.echartsjs.com/editor.html?c=xH1Vpz2CHm
    var myChart = echarts.init(document.getElementById('main'));
    // myChart.showLoading();
    var uploadedDataURL_Road = "../../data/data-1534143589600-SJRPnoAHQ.json";

    var uploadedDataURL = "../../data/data-1534124434928-H1s9ZDCHm.png";

    var urls = [
        '../../data/data-1534122453627-Sk0AFUAS7.json',
        '../../data/data-1534122457941-SyzJ5LRrm.json',
        '../../data/data-1534122460460-Sy4ycIRrm.json',
        '../../data/data-1534122464227-SyO19LASQ.json',
        '../../data/data-1534122469424-H1T1cIAHm.json',
        '../../data/data-1534122472873-r1bxqLCrm.json',
        '../../data/data-1534122475403-rkXe9I0B7.json',
        '../../data/data-1534122480993-Byte9UABm.json',
        '../../data/data-1534122485491-Sk6ecICBQ.json',
        '../../data/data-1534122489312-SJWbqIRSX.json',
        '../../data/data-1534122493485-SkSZ5L0SQ.json',
        '../../data/data-1534122497610-rJq-qU0H7.json',
        '../../data/data-1534122500830-H16ZcLRSQ.json',
        '../../data/data-1534122505132-Hk-M980HX.json',
        '../../data/data-1534122575649-Bku8qI0rm.json',
        '../../data/data-1534122579059-SJiIqUCrQ.json',
        '../../data/data-1534122582576-SyyvqURSm.json',
        '../../data/data-1534123103827-Hyuvn8ABX.json',
        '../../data/data-1534123105869-rJqP2IASX.json',
        '../../data/data-1534123108102-rynD3IAH7.json',
        '../../data/data-1534123110483-Hk0DnIRSm.json',
        '../../data/data-1534123112641-Sy-OnUAS7.json',
        '../../data/data-1534123114663-H1XdnIASQ.json',
        '../../data/data-1534123117335-S1Su3U0rm.json',
        '../../data/data-1534123119678-ryuu2U0BX.json',
        '../../data/data-1534123122201-r19_2LRrX.json',
        '../../data/data-1534123124560-rkpOnL0HX.json',
        '../../data/data-1534123127438-rJ1Yh8ASQ.json',
        '../../data/data-1534123130178-HkMY2URH7.json',
        '../../data/data-1534123132763-SkBtnUCr7.json',
        '../../data/data-1534123135252-BJvKnLCB7.json',
        '../../data/data-1534123147274-r1m52ICSm.json',
        '../../data/data-1534123149452-SJB938Crm.json',
        '../../data/data-1534123151998-rkO9h8RSm.json',
        '../../data/data-1534123154271-rJ99h8CS7.json',
        '../../data/data-1534123156635-ByT53ICBm.json',
        '../../data/data-1534123158829-rk1in80Sm.json',
        '../../data/data-1534123165450-rJHj2LRH7.json',
        '../../data/data-1534123169857-ry9s3I0BQ.json',
        '../../data/data-1534123172167-BJ3i38CHQ.json',
        '../../data/data-1534123178732-SymnnIRHQ.json',
        '../../data/data-1534123181402-r1HnhLRS7.json',
        '../../data/data-1534123184197-ByO2nLRr7.json',
        '../../data/data-1534123187746-Hyh3nUAr7.json',
        '../../data/data-1534123191298-Bykp3URSQ.json',
        '../../data/data-1534123210480-ryzC3U0H7.json',
        '../../data/data-1534123213741-S180h8AHm.json',
        '../../data/data-1534123216424-BydCn80HX.json',
        '../../data/data-1534123218675-HJsChURBX.json',
        '../../data/data-1534123229545-SyU1T8ABX.json',
        '../../data/data-1534123232244-BkdJaUCrX.json',
        '../../data/data-1534123234858-H1sJ6I0Hm.json',
        '../../data/data-1534123237173-rk6kaLCB7.json',
        '../../data/data-1534123239663-HkxlpLABm.json',
        '../../data/data-1534123242280-HkGgaU0Hm.json',
        '../../data/data-1534123244901-HJSepUCHm.json',
        '../../data/data-1534123248392-rkOg68CrX.json',
        '../../data/data-1534123250899-SJjgpL0H7.json',
        '../../data/data-1534123254292-rkAlaUArm.json',
        '../../data/data-1534123258486-ryz-6LRBX.json',
        '../../data/data-1534123282702-B1iG6I0Bm.json',
        '../../data/data-1534123284897-H1aGpICSX.json',
        '../../data/data-1534123287886-HkgmTL0BX.json',
        '../../data/data-1534123290691-rJQXaUAHm.json',
        '../../data/data-1534123293635-ryLXa8ArQ.json',
        '../../data/data-1534123296625-rkFQpIRHQ.json',
        '../../data/data-1534123300422-S137pLCSm.json',
        '../../data/data-1534123304645-Sy-ETI0Sm.json',
        '../../data/data-1534123308760-BySVa8CSm.json',
        '../../data/data-1534123319900-BJeBpL0SX.json',
        '../../data/data-1534123323017-H1mSTLRSQ.json',
        '../../data/data-1534123325915-rk8STLAHQ.json',
        '../../data/data-1534123337250-Hk-LaLCSQ.json',
        '../../data/data-1534123351737-BkgvpLCSX.json',
        '../../data/data-1534123353938-HyMw68CS7.json',
        '../../data/data-1534123356243-ry4PTLRrX.json',
        '../../data/data-1534123358565-HJvvpIASX.json',
        '../../data/data-1534123360969-BJKPTL0Hm.json',
        '../../data/data-1534123363418-BJoD6LCHm.json',
        '../../data/data-1534123365741-HJRP6U0Sm.json',
        '../../data/data-1534123368303-r1l_aLABm.json',
        '../../data/data-1534123371112-H1m_TL0rQ.json',
        '../../data/data-1534123373639-rk8dpICHQ.json',
        '../../data/data-1534123375996-HJdOpLCSm.json',
        '../../data/data-1534123378375-HJ5_aL0BQ.json',
        '../../data/data-1534123381458-rkTdaUABQ.json',
        '../../data/data-1534123383791-H1gY6LASm.json',
        '../../data/data-1534123386608-r1Qta8AHX.json',
        '../../data/data-1534123389592-BkLFT80Sm.json',
        '../../data/data-1534123392752-ByYFaLASQ.json',
        '../../data/data-1534123404802-H1H9p8ASQ.json',
        '../../data/data-1534123406805-HJwqTU0Bm.json',
        '../../data/data-1534123409216-rkYcTURB7.json',
        '../../data/data-1534123411440-rkoqT8AHX.json',
        '../../data/data-1534123413486-HJ69pU0SX.json',
        '../../data/data-1534123415782-rygoTI0Hm.json',
        '../../data/data-1534123418179-SJMipICBm.json',
        '../../data/data-1534123420543-rJrj6LRBQ.json',
        '../../data/data-1534123422759-rkDiaUASQ.json',
        '../../data/data-1534123425409-H1FsTLRB7.json',
        '../../data/data-1534123427825-rk2o680rQ.json',
        '../../data/data-1534123430410-ryCsTUCr7.json',
        '../../data/data-1534123432881-S1Z2pUCBQ.json',
        '../../data/data-1534123435520-BkNnp80SQ.json',
        '../../data/data-1534123439893-By_3TIABm.json',
        '../../data/data-1534123443374-HJi3aURBm.json',
        '../../data/data-1534123446355-HyAh6L0rm.json',
        '../../data/data-1534123449835-ByM6TICHm.json',
        '../../data/data-1534123452692-HJrT6LASm.json',
        '../../data/data-1534123455539-Sy_6680SX.json',
        '../../data/data-1534123466997-S1mApURBm.json',
        '../../data/data-1534123469207-rJHRaIAHm.json',
        '../../data/data-1534123471315-SyDATUArQ.json',
        '../../data/data-1534123474095-B15Cp8RrX.json',
        '../../data/data-1534123476663-Hyp0TIRrX.json',
        '../../data/data-1534123479220-BJJ10LABQ.json',
        '../../data/data-1534123481859-SyzkALAHX.json',
        '../../data/data-1534123484201-B1Ek0UABm.json',
        '../../data/data-1534123486539-rJwy08RHX.json',
        '../../data/data-1534123488873-SyKJAURrX.json',
        '../../data/data-1534123491450-Hks10IRHm.json',
        '../../data/data-1534123494077-S10108RSQ.json',
        '../../data/data-1534123496303-Hkgxg08CHX.json',
        '../../data/data-1534123498919-By7eRLAH7.json',
        '../../data/data-1534123504469-Sk_xC80S7.json',
        '../../data/data-1534123508397-B1ne0IRB7.json',
        '../../data/data-1534123511120-SyJbC8CrX.json',
        '../../data/data-1534123514840-Sk7ZCICBm.json',
        '../../data/data-1534123517358-SyBZ0IRS7.json'
    ];


    var len = urls.length;
    var index = 0;
    var idMap = {};

    function getRoads(callback) {
        $.getJSON(uploadedDataURL_Road, function (roadJson) {
            var linesData = formatRoadData(roadJson);
            callback(linesData);
        });
    }



    function formatRoadData(shanghairoads) {
        var roads = shanghairoads;
        var roadList = [];
        roads.forEach(element => {
            var roadArray = element.split(';');
            var lnglats = [];
            roadArray.forEach(ll => {
                let lnglat = ll.split(',');
                lnglat = [parseFloat(lnglat[0]), parseFloat(lnglat[1])];
                let pt = turf.point(lnglat);
                let converted = turf.toWgs84(pt);
                lnglats.push(converted.geometry.coordinates);
            });
            roadList.push({
                coords: lnglats
            });
        });
        return roadList;

    }

    function getJson(idx) {
        var url = urls[idx];
        $.getJSON(url, function (buildingsGeoJSON) {
            var builds = [];
            if (buildingsGeoJSON.features) {
                buildingsGeoJSON = buildingsGeoJSON.features;
                builds = buildingsGeoJSON.map(function (feature) {
                    //   feature.properties.name=feature.id;
                    // console.log(feature.properties)
                    return feature;
                })
            } else {
                builds = buildingsGeoJSON.map(function (feature) {
                    return {
                        "type": "Feature",
                        "properties": {
                            "name": Math.random().toString(),
                            "height": feature.height
                        },
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [feature.polygon]
                        }
                    }
                })
            }
            var buildsNew = [];
            builds.forEach(element => {
                let id = element.id;
                if (!idMap[id]) {
                    buildsNew.push(element);
                    idMap[id] = id;
                }

            });
            var regionsData = buildsNew.map(function (feature) {
                let f = {
                    name: feature.properties.name || feature.properties.id,
                    value: Math.random() * 1,
                    height: feature.properties.height * 2 || feature.properties.levels * 8,
                    coords: feature.geometry.coordinates,
                };
                if (f.height < 30 || isNaN(f.height)) f.height = 30;
                return f;
            });
            index++;
            if (index < len) {
                myChart.appendData({
                    seriesIndex: 0,
                    data: regionsData
                });
                getJson(index);
            } else {
                //initCharts(index);
            }
        })

    }

    function initCharts(linesData) {
        myChart.setOption({
            title: {
                text: '陆家嘴',
                textStyle: {
                    color: '#fff',
                    fontSize: 45,
                    align: 'center'
                }
            },
            maptalks3D: {
                zoom: 6,
                center: [121.49342415576655, 31.24042154361959],
                pitch: 55,
                bearing: 0,
                // urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                urlTemplate: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=95f0a5688ec713adb3dd1735533f6fcb',
                // postEffect: {
                //     enable: true,
                //     FXAA: {
                //         enable: true
                //     }
                // },
                light: {
                    main: {
                        intensity: 1,
                        shadow: false,
                        shadowQuality: 'high'
                    },
                    ambient: {
                        intensity: 0.
                    },
                    ambientCubemap: {
                        texture: '../../data/data-1491838644249-ry33I7YTe.hdr',
                        exposure: 1,
                        diffuseIntensity: 0.5,
                        specularIntensity: 2
                    }
                }
            },
            series: [{
                type: 'polygons3D',
                coordinateSystem: 'maptalks3D',
                // multiPolygon: true,
                // map: 'buildings',
                data: [], //buildsData,
                shading: 'realistic',
                instancing: true,
                silent: true,
                realisticMaterial: {
                    metalness: 1,
                    roughness: 0.4,
                    textureTiling: 35,
                    detailTexture: uploadedDataURL
                }
            },
            // {
            //     type: 'lines3D',
            //     coordinateSystem: 'maptalks3D',
            //     effect: {
            //         show: true,
            //         constantSpeed: 0.001,
            //         trailWidth: 5,
            //         trailLength: 0.5,
            //         trailOpacity: 1,
            //         spotIntensity: 10
            //     },
            //     blendMode: 'lighter',
            //     lineStyle: {
            //         color: '#0991A9',
            //         opacity: 0.1
            //
            //     },
            //     polyline: true,
            //     data: linesData
            // }
            ]
        });
        var map = myChart.getModel().getComponent('maptalks3D').getMaptalks();
        map.on('click', function (e) {
            console.log(map.getView());
        })
        map.animateTo({
            zoom: 16,
            center: [121.49342415576655, 31.24042154361959],
            pitch: 55,
            bearing: 0
        }, {
                duration: 5000
            })
    }
    myChart.showLoading();
    getRoads(function (linesData) {
        myChart.hideLoading();
        initCharts(linesData);
        getJson(0)
    });


    window.addEventListener('resize', function () {
        myChart.resize();
    });
</script>

</html>
